<template>
  <div>
    <!-- 头部vent组件，显示顶部导航栏 -->
    <van-nav-bar
      title="地图找房"
      left-arrow
      @click-left="onClickLeft"
    />
   <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
    <!-- 低中部引入控件，  #文档=>控件=>比例尺-->
    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
    <!-- 右底部引入控件， #文档=>控件=>缩放  -->
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
    <!-- 百度地图api  覆盖物 标签 -->
    <!-- 遍历list -->
    <bm-label v-for='(item,index) in list' :key='index' :content="`${item.label}<br>${item.count}`" :position="{lng: item.coord.longitude, lat: item.coord.latitude}" :labelStyle="{color: 'red', fontSize : '24px'}" title="Hover me" @click="clickFn(item)"/><!-- 添加点击事件 -->
   </baidu-map>
  </div>
</template>

<script>
import request from '@/utils/request'
import { getcityValue } from '@/utils/storage'
export default {
  name: 'map_page',
  data () {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 3,
      list: []

    }
  },
  methods: {
    handler ({ BMap, map }) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    },
    onClickLeft () {
      this.$router.back()
    },
    // 2.点击
    async clickFn (item) {
      this.center.lng = item.coord.longitude
      this.center.lat = item.coord.latitude
      this.zoom += 2// 改变初始地图放大的倍数
      const res = await request.get('/area/map', { params: { id: item.value } })
      console.log(res)
      this.list = res.body
    }

  },
  async created () {
    // 1. 改定位中心点经纬度 到默认城市的某个地方
    const res = await request.get('/area/map', { params: { id: getcityValue() } })// params里面写对象，不要忘记写键
    console.log(res)
    this.list = res.body
    this.center.lng = this.list[0].coord.longitude
    this.center.lat = this.list[0].coord.latitude
    this.zoom = 11// 改变初始地图放大的倍数
  }

}
</script>

<style>
  .map {
    width: 100%;
    height: 700px;
  }
</style>
